<html>
	<head>
		<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
		<style type="text/css">
			input{
			}
		</style>
	</head>

	<body>
		<script src="http://code.jquery.com/jquery-latest.js"></script>
		<script src="/bootstrap/js/bootstrap.min.js"></script>
		{% include "navigationbar.html" %}

		<h1>品目管理</h1>

		<div class="tabbable tabs-left"> <!-- Only required for left/right tabs -->
			<ul class="nav nav-tabs">
				<li {{ 'class="active"' if command != 'add' }}><a href="#tab1" data-toggle="tab">品目一覧</a></li>
				<li {{ 'class="active"' if command == 'add' }}><a href="#tab2" data-toggle="tab">品目追加</a></li>
			</ul>
			<div class="tab-content">
				<div class="tab-pane{{ ' active' if command != 'add'}}" id="tab1">
					<table class="table table-hover">
						<thead>
							<tr><th>品目名</th><th>注文番号</th><th>開始日</th><th>終了日</th><th>終了済み</th></tr>
						</thead>
						<tbody>
							{% for p in products %}
								<tr href="#editProduct_{{p.orderno}}" data-toggle="modal"><td>{{p.name}}</td><td>{{p.orderno}}</td><td>{{p.start}}</td><td>{{p.end}}</td><td>{{'終了済み' if p.closed else '<br/>' }}</td></tr>
							{% endfor %}
							</tbody>
					</table>
				</div>
				<div class="tab-pane{{ ' active' if command == 'add'}}" id="tab2">
					<div>
						<form action="productManager/add" method="post">
							<table>
								<tr><td>品目：</td><td><input type="text" name="name"/></td></tr>
								<tr><td>注文番号：</td><td><input type="text" name="orderno"/></td></tr>
								<tr><td>顧客：</td><td><input type="text" name="client"/></td></tr>
								<tr><td>開始日：</td><td><input type="text" name="start"/></td></tr>
								<tr><td>終了日：</td><td><input type="text" name="end"/></td></tr>
								<tr><td colspan="2" style="text-align:right"><input type="submit"/></td></tr>
							</table>
						</form>
					</div>
				</div>
			</div>
		</div>

		<!-- Edit Product Modal -->
		{% for p in products %}
		<div id="editProduct_{{p.orderno}}" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="headerLabel_{{p.orderno}}" aria-hidden="true">
			<form action="productManager/edit" method="post">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
					<h3 id="headerLabel_{{p.orderno}}">品目編集</h3>
				</div>
				<div class="modal-body">
					<table>
						<tr><td>品目：</td><td><input type="text" name="name" value="{{p.name}}"/></td></tr>
						<tr><td>注文番号：</td><td><input type="text" name="orderno" value="{{p.orderno}}"/></td></tr>
						<tr><td>顧客：</td><td><input type="text" name="client" value="{{p.clientid}}"/></td></tr>
						<tr><td>開始日：</td><td><input type="text" name="start" value="{{p.start}}"/></td></tr>
						<tr><td>終了日：</td><td><input type="text" name="end" value="{{p.end}}"/></td></tr>
					</table>
				</div>
				<div class="modal-footer">
					<input type="submit" class="btn btn-danger" value="削除"/>
					<a href="#" class="btn" data-dismiss="modal">キャンセル</a>
					<input type="submit" class="btn btn-primary" value="OK"/>
				</div>
			</form>
		</div>
		{% endfor %}
    </body>
</html>